<template>
    <div class="text" v-bind:class="{ box:isBox,border:isBorder}">
        <div v-bind:class="{ inner:isInner }">No1</div>
        <div v-bind:class="classObject">No2</div>
        <div v-bind:class="classMeal">No3</div>
    </div>
</template>

<script setup>
import { ref,reactive, computed} from 'vue'
const isBox = ref(true)
const isBorder = ref(true)
const isInner = ref(true)
const isMeal = ref(true)
const classObject = reactive({ inner:true })
const classMeal = computed(()=>{
    meal:isMeal.value
})

</script>

<style scoped>
.text{
    text-align: center;
    line-height: 40px;
}
.box{
    width: 100%;
    background: linear-gradient(white,rgb(200,200,200));
}
.border{
    border: 4px dotted black;
}
.inner{
    margin-top: 3px;
    width: 100px;
    height: 40px;
    border: 5px double black;
}
.meal{
    width: 100px;
    height: 30px;
    border: 2px dashed rgb(250, 250, 250);
}
</style>
